<template>
  <div>
    <!-- 下面部分 -->
    <el-card style="margin:20px">
      <el-table :data="list" style="width: 100%">
        <el-table-column
          type="index"
          label="序号"
        />
        <el-table-column
          v-model="form.id"
          prop="id"
          label="运输任务编号"
        />
        <el-table-column
          v-model="form.licensePlate"
          prop="truck.licensePlate"
          label="车牌号码"
        />
        <el-table-column
          v-model="form.startAgency"
          prop="startAgency.name"
          label="起始地"
        />
        <el-table-column
          v-model="form.endAgency"
          prop="endAgency.name"
          label="目的地"
        />
        <el-table-column
          v-model="form.status"
          prop="status"
          label="运输任务状态"
          :formatter="formatRunStatus"
        />
        <el-table-column
          v-model="form.loadingStatus"
          prop="loadingStatus"
          label="车辆装载状态"
          :formatter="loadingStatus"
        />
        <el-table-column
          v-model="form.assignedStatus"
          prop="truck.status"
          label="任务分配状态"
          :formatter="assignedStatus"
        />

        <el-table-column
          v-model="form.planDepartureTime"
          prop="planDepartureTime"
          label="计划发车时间"
        />
        <el-table-column
          v-model="form.actualDepartureTime"
          prop="actualDepartureTime"
          label="实际发车时间"
        />
        <el-table-column
          v-model="form.updated"
          prop="updated"
          label="更新时间"
        />
        <template slot="empty">
          <img src="./pic-kong.742d3899.png" alt="" style="margin-top: 20px;width: 25%;height: 25%;">
          <div>这里空空如也</div>
        </template>
        <el-table-column prop="caozuo" label="操作" fixed="right" width="200">
          <template v-slot="{row}">
            <div style="display:flex">
              <el-button type="text" size="small" @click="asd(row.id)">查看</el-button>
              <el-button type="text" size="small" disabled>取消</el-button>
              <el-button type="text" size="small" disabled>手动调整</el-button>
            </div>
          </template>
        </el-table-column>

      </el-table>
      <!-- 分页组件 -->
      <el-row type="flex" justify="center" align="middle" style="height: 60px">

        <el-pagination
          :page-sizes="[10, 20, 30, 40, 50, 60, 70]"
          :page-size="form.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="currentChange"
          @current-change="currentChange"
        />
      </el-row>
    </el-card>
  </div>
</template>

<script>
// api接口
import { getTransportPage } from '@/api/modules/scheduling/transportationTask'
// 导入枚举资源
import scheduling from '@/constant/scheduling'

export default {
  props: {
    res1: {
      type: Object,
      default: function() {}
      // default: false
    }
  },
  data() {
    return {
      label: '',
      scheduling,
      list: [],
      form: {
        id: '',
        status: '',
        loadingStatus: '',
        licensePlate: '',
        startAgency: '',
        endAgency: '',
        assignedStatus: '',
        lanDepartureTime: '',
        actualDepartureTime: '',
        updated: '',
        page: 1,
        pageSize: 10,
        planArrivalTime: '',
        startAgencyId: '',
        truckId: '',
        endAgencyId: ''
      },
      // pageConfig: {
      //   page: 1, // 当前页码
      //   pageSize: 10 // 显示几个
      // },
      total: 0 // 总条数
    }
  },
  watch: {
    // 监听我们有没有点击哪个东西
    async label(newa, old) {
      console.log(newa, old)
      if (newa === '全部') {
        this.form.status = ''
        this.loadPage()
        return
      }
      // 这个是新旧值
      // console.log(newa)
      // console.log(old)
      // 每次点击切换，都要发请求，获取全部的数据
      this.form.status = scheduling.assignedStatus.find(v => v.value === newa).id
      this.loadPage()
      // 根据label变化的不同，渲染我们的 list 数组实现页面渲染不同的东西
      // console.log(res.data.data.items)
      // console.log(scheduling.assignedStatus.find(v => v.value === newa).id)
      // 处理返回的数据，将数据进行处理，返回给list 对应的数据
    }

  },
  async created() {
    this.loadPage()
    console.log(33333333, this.res1)
  },
  methods: {
    asd(id) {
      console.log(id)
      this.$router.push(`detail/${id}`)
      // task-detail/:id&:type=运输管理
    },
    // 加载页面数据
    async loadPage() {
      const res = await getTransportPage(this.form)
      // console.log(22, res.data.items)
      // 让items数据渲染页面
      this.list = res.data.items
      // this.list.truck.status = this.list.map(v => v.truck.runStatus ? '已完成' : '未完成')
      const { page, pageSize, counts } = res.data
      // console.log(page, pageSize, counts)
      // 总条数是字符串类型 需要转成数字类型
      this.total = Number(counts)
      this.form.page = page
      this.form.pageSize = pageSize
    },
    // 页面切换功能
    currentChange(newPage) {
      // 让切换的页码等于新的页面
      this.form.page = newPage
      // 重新加载数据
      this.loadPage()
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },

    // 通过枚举数据 格式化显示聘用形式
    formatRunStatus(row, column, val, index) {
      const res = scheduling.assignedStatus.find(v => v.id === val)
      return res ? res.value : '未知'
    },
    loadingStatus(row, column, val, index) {
      const res = scheduling.loadingStatus.find(v => v.id === val)
      return res ? res.value : '未知'
    },
    assignedStatus(row, column, val, index) {
      const res = scheduling.runStatus.find(v => v.id === val)
      return res ? res.value : '未知'
    }
  }
}
</script>

<style>

</style>
